﻿<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>jQuery可见性过滤器:hidden示例</title>
        <script src="js/jquery-3.6.1.min.js"></script>
		<style>
		div{
			width:100px;
			border:1px solid;
			float:left;
			margin:10px;
		}
		</style>
    </head>
    <body>
        <h3>jQuery可见性过滤器:hidden示例</h3>
        <hr>
		<form>
		    <!--处于显示状态的input元素-->
		    <input type="text" value="这是可显示的input文本框" />
			<!--处于隐藏状态的input元素-->
			<input type="hidden" />
		</form>
		<br>
		<!--处于显示状态的div元素-->
		<div>这是可显示的div元素。</div>
		<!--处于隐藏状态的div元素-->
		<div style="display:none">hi</div>
        <script>
            $(document).ready(function() {
				//选择处于隐藏状态的div元素
				var hideDiv = $("body").find("div:hidden");
				//选择处于隐藏状态的input元素
				var hideInput = $("body").find("input:hidden");
				alert("处于隐藏状态的div元素有："+hideDiv.length+"个。\n处于隐藏状态的input元素有："+hideInput.length+"个。");			
            });
        </script>
    </body>
</html>